<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    width="70%"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="分类名称" prop="catname">
            <el-input v-model="dataForm.catname" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类名称缩写" prop="simplename">
            <el-input v-model="dataForm.simplename" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="是否显示" prop="isshow">
            <!-- <el-input v-model="dataForm.isshow" placeholder=""></el-input> -->
            <el-select v-model="dataForm.isshow" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in showoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否楼层" prop="isfloor">
            <!-- <el-input v-model="dataForm.isfloor" placeholder=""></el-input> -->
            <el-select v-model="dataForm.isfloor" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in flooroptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="排序号" prop="catsort">
            <el-input v-model="dataForm.catsort" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="佣金" prop="commissionrate">
            <el-input v-model="dataForm.commissionrate" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级分类">
            <el-input
              ref="parentName"
              v-model="dataForm.parentcatname"
              v-popover:menuListPopover
              :readonly="true"
              placeholder="点击选择上级菜单"
              class="menu-list__input"
            />
            <el-popover
              ref="menuListPopover"
              placement="bottom-start"
              trigger="click"
              @show="getPopover('parentName','menuListPopover')"
            >
              <div style="height: 200px;overflow-y:auto">
                <el-tree
                  ref="catsTree"
                  :data="cats"
                  :props="catsTreeProps"
                  node-key="catid"
                  :default-expand-all="true"
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  @current-change="catsTreeCurrentChangeHandle"
                />
              </div>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" icon="el-icon-close" @click="visible = false">取消</el-button>
      <el-button size="mini" icon="el-icon-check" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        catid: 0,
        parentid: '',
        catname: '',
        isshow: '',
        isfloor: '',
        catsort: '',
        dataflag: '',
        createtime: '',
        commissionrate: '',
        catimg: '',
        subtitle: '',
        simplename: '',
        seotitle: '',
        seokeywords: '',
        seodes: '',
        catlisttheme: '',
        detailtheme: '',
        mobilecatlisttheme: '',
        mobiledetailtheme: '',
        wechatcatlisttheme: '',
        wechatdetailtheme: '',
        parentcatname: '',
        showway: ''
      },
      cats: [],
      catsTreeProps: {
        label: 'catname',
        children: 'children'
      },
      flooroptions: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      showoptions: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      dataRule: {
        parentid: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        catname: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        isshow: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        isfloor: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        catsort: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        dataflag: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        createtime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        commissionrate: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        catimg: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        subtitle: [
          { required: true, message: '楼层副标题不能为空', trigger: 'blur' }
        ],
        simplename: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        seotitle: [
          { required: true, message: '分类SEO标题不能为空', trigger: 'blur' }
        ],
        seokeywords: [
          { required: true, message: '分类SEO关键字不能为空', trigger: 'blur' }
        ],
        seodes: [
          { required: true, message: '分类SEO描述不能为空', trigger: 'blur' }
        ],
        catlisttheme: [
          { required: true, message: '商品分类列表风格不能为空', trigger: 'blur' }
        ],
        detailtheme: [
          { required: true, message: '商品详情风格不能为空', trigger: 'blur' }
        ],
        mobilecatlisttheme: [
          { required: true, message: '移动端商品分类列表风格不能为空', trigger: 'blur' }
        ],
        mobiledetailtheme: [
          { required: true, message: '移动端商品详情风格不能为空', trigger: 'blur' }
        ],
        wechatcatlisttheme: [
          { required: true, message: '微信端商品分类列表风格不能为空', trigger: 'blur' }
        ],
        wechatdetailtheme: [
          { required: true, message: '微信端商品详情风格不能为空', trigger: 'blur' }
        ],
        showway: [
          { required: true, message: '显示方式 0:卡片 1:列表不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getPopover(container, popover) {
      this.$refs[popover].width = this.$refs[container].$el.offsetWidth
      this.$refs[popover].disable = false
    },
    catsTreeCurrentChangeHandle(data, node) {
      this.dataForm.parentid = data.catid
      this.dataForm.parentcatname = data.catname
    },
    init(id, parentid) {
      this.dataForm.catid = id || 0
      this.dataForm.parentid = parentid || 0
      this.visible = true
      this.dataForm.parentcatname = ''
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.$http({
          url: this.$http.adornUrl('/goods/cats/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.cats = treeDataTranslate(data.list, 'catid', 'parentid')
        }).then(() => {
          if (this.dataForm.catid) {
            this.$http({
              url: this.$http.adornUrl(`/goods/cats/info/${this.dataForm.catid}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm.parentid = data.goodscats.parentid
                this.dataForm.catname = data.goodscats.catname
                this.dataForm.isshow = data.goodscats.isshow
                this.dataForm.isfloor = data.goodscats.isfloor
                this.dataForm.catsort = data.goodscats.catsort
                this.dataForm.dataflag = data.goodscats.dataflag
                this.dataForm.createtime = data.goodscats.createtime
                this.dataForm.commissionrate = data.goodscats.commissionrate
                this.dataForm.catimg = data.goodscats.catimg
                this.dataForm.subtitle = data.goodscats.subtitle
                this.dataForm.simplename = data.goodscats.simplename
                this.dataForm.seotitle = data.goodscats.seotitle
                this.dataForm.seokeywords = data.goodscats.seokeywords
                this.dataForm.seodes = data.goodscats.seodes
                this.dataForm.catlisttheme = data.goodscats.catlisttheme
                this.dataForm.detailtheme = data.goodscats.detailtheme
                this.dataForm.mobilecatlisttheme = data.goodscats.mobilecatlisttheme
                this.dataForm.mobiledetailtheme = data.goodscats.mobiledetailtheme
                this.dataForm.wechatcatlisttheme = data.goodscats.wechatcatlisttheme
                this.dataForm.wechatdetailtheme = data.goodscats.wechatdetailtheme
                this.dataForm.showway = data.goodscats.showway
                if (this.dataForm.parentid && this.dataForm.parentid !== 0) {
                  this.catsTreeSetCurrentNode()
                } else {
                  this.dataForm.parentcatname = ''
                }
              }
            })
          }
        }).then(() => {
          if (this.dataForm.parentid && this.dataForm.parentid !== 0) {
            this.catsTreeSetCurrentNode()
          } else {
            this.dataForm.parentcatname = ''
          }
        })
      })
    },
    // 菜单树设置当前选中节点
    catsTreeSetCurrentNode() {
      this.$refs.catsTree.setCurrentKey(this.dataForm.parentid)
      this.dataForm.parentcatname = (this.$refs.catsTree.getCurrentNode() || {})['catname']
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/goods/cats/${!this.dataForm.catid ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'catid': this.dataForm.catid || undefined,
              'parentid': this.dataForm.parentid,
              'catname': this.dataForm.catname,
              'isshow': this.dataForm.isshow,
              'isfloor': this.dataForm.isfloor,
              'catsort': this.dataForm.catsort,
              'dataflag': this.dataForm.dataflag,
              'createtime': this.dataForm.createtime,
              'commissionrate': this.dataForm.commissionrate,
              'catimg': this.dataForm.catimg,
              'subtitle': this.dataForm.subtitle,
              'simplename': this.dataForm.simplename,
              'seotitle': this.dataForm.seotitle,
              'seokeywords': this.dataForm.seokeywords,
              'seodes': this.dataForm.seodes,
              'catlisttheme': this.dataForm.catlisttheme,
              'detailtheme': this.dataForm.detailtheme,
              'mobilecatlisttheme': this.dataForm.mobilecatlisttheme,
              'mobiledetailtheme': this.dataForm.mobiledetailtheme,
              'wechatcatlisttheme': this.dataForm.wechatcatlisttheme,
              'wechatdetailtheme': this.dataForm.wechatdetailtheme,
              'showway': this.dataForm.showway
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
